<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>js增删改查</title>
    <style>
        h3{
            text-align: center;
        }
        ul li {
            list-style: none;
            float: left;
            border: 1px solid #000;
            width: 120px;
            height: 20px;
            text-align: center;
        }

        ul {
            overflow: hidden;
        }

        .big {
            width: 800px;
            border: 3px solid #000;
            background-color: pink;
        }

        #xuanran button {
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0);
        }
        button{
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="big" id="biger">
        <h3>学生管理系统</h3>
        编号：<input type="text" id="idd" placeholder="您的编号"><br>
        姓名：<input type="text" id="userName" placeholder="请输入您的姓名"><br>
        性别：  男：<input type="radio" value="0" name="sex" checked>
                女：<input type="radio" value="1" name="sex"><br>
        电话：<input type="text" id="userPhone" placeholder="请输入您的电话" maxlength="11"><br>
        年龄：<input type="text" id="userAge" placeholder="请输入您的出生年月">
              <button onclick="add()">提交</button><br>
        查询：<input type="text" id="search" placeholder="查询"> 
              <button onclick="search_f()" id="search_btn">查询</button>
        <ul>
            <li>id</li>
            <li>name</li>
            <li>gender</li>
            <li>phone</li>
            <li>age</li>
            <li>make</li>
        </ul>
        <div id="xuanran">
            <!-- 
                    <ul>
                        <li>1</li>
                        <li>张三</li>
                        <li>0</li>
                        <li>18327614096</li>
                        <li>18</li>
                        <li>
                            <a href="">删除</a> /
                            <a href="">修改</a>
                        </li>
                    </ul>
                 -->
        </div>
    </div>
    <script>
        var data = [{
            id: 1,
            use_name: "张三",
            sex: 0,
            phone: "18327614096",
            age: 16,
            delete: false,
        }, {
            id: 2,
            use_name: "李四",
            sex: 1,
            phone: "18327614096",
            age: 18,
            delete: false,
        }
            , {
            id: 3,
            use_name: "王五",
            sex: 0,
            phone: "18327614096",
            age: 17,
            delete: false,

        },
        {
            id: 4,
            use_name: "老六",
            sex: 0,
            phone: "18327614096",
            age: 19,
            delete: false,
        },
        {
            id: 5,
            use_name: "小七",
            sex: 1,
            phone: "18327614096",
            age: 20,
            delete: false,
        }
        ];
       
        var userName = document.getElementById("userName").value; 
        var sex = document.getElementsByName("sex");
        var userPhone = document.getElementById("userPhone").value;
        var userAge = document.getElementById("userAge").value;
        var search = document.getElementById("search").value;


        //数据渲染初始化
        function chushihua() {
            var str = "";
            for (var i = 0; i < data.length; i++) {
                data[i].id = i;
                //    console.log(data[i].id);
                if (data[i].sex == 0) {

                    data[i].sex = "男";

                } else if (data[i].sex == 1) {
                    data[i].sex = "女";
                }
                str += '<ul><li>' + data[i].id + '</li><li>' + data[i].use_name + '</li><li>' + data[i].sex + '</li><li>' + data[i].phone + '</li><li>' + data[i].age + '</li><li><button onclick="del(' + data[i].id + ')">删除</button>|<button onclick="xiugai(' + i + ')">修改</button></li></ul>';

                
            }
            var xuanran = document.getElementById("xuanran");
            xuanran.innerHTML = str;
        }
        chushihua();
        //删除
        function del(index) {

            var dels = confirm("您确定删除吗?");
            if (dels == true) {
                data.splice(index, 1);
            } else {
                return;
            }
            // console.log(index);
            chushihua();
        };
        // 增加
        //第一个拿到数据，把数据集合变成一个对象
        //把sex0，1展示成男，女
        //研究性判断 名字判断不能出现数字特殊字符
        //电话 长度，判断是不是有重复的
        //年龄 出生日期，内置对象-出生日期=当前年龄
        //增加后需要重渲染

        function add() {
            if (!document.getElementById("idd").value) {
                var gender;
                for (var j = 0; j < sex.length; j++) {
                    if (sex[j].checked) {
                        gender = sex[j].value;
                        // console.log(sex[j].value);
                    }
                    // sex[j].value
                }

                // document.getElementById("idd").value = data[i].id;
                // document.getElementById("userName").value = data[i].use_name;
                // console.log(data[i].use_name);
                // data[document.getElementById("idd").value].use_name = document.getElementById("userName").value;
               
                // console.log(data[document.getElementById("idd").value].use_name);

                //获取框里面的内容赋值
                userName = document.getElementById("userName").value;
                userPhone = document.getElementById("userPhone").value;
                userAge = document.getElementById("userAge").value;
                // console.log(userName);
                data.push({
                    id: data.id,
                    use_name: userName,
                    sex: gender,
                    phone: userPhone,
                    age: userAge,
                });
                console.log(data);
            } else {
                //修改
                data[document.getElementById("idd").value].use_name = document.getElementById("userName").value;
                data[document.getElementById("idd").value].sex = gender;
                data[document.getElementById("idd").value].age = document.getElementById("userAge").value;
                data[document.getElementById("idd").value].phone = document.getElementById("userPhone").value;
                var gender;
                for (var j = 0; j < sex.length; j++) {
                    if (sex[j].checked) {
                        gender = sex[j].value;
                        // console.log(sex[j].value);
                    }
                    // sex[j].value
                }
                
            }

            // console.log(data);
            chushihua();
        }
        chushihua();

        //修改
        function xiugai(i) {
            //获取值
            document.getElementById("idd").value = data[i].id;
            document.getElementById("userName").value = data[i].use_name;
            document.getElementById("userPhone").value = data[i].phone;
            document.getElementById("userAge").value = data[i].age;
            if (data[i].sex == "男") {
                document.getElementsByName("sex")[0].checked = true;
            } else {
                document.getElementsByName("sex")[1].checked = true;
            }
           
            chushihua();
        }

        //查

        // search=document.getElementById("search").value;
        // console.log(document.getElementById("search").value);
        // console.log(search);

     
        function search_f() {
            search=document.getElementById("search").value;
            console.log(search);

            // console.log("use_name" in data);

            // console.log(data.indexOf(search));//-1
            // console.log(data[i].use_name.indexOf(search));
            // if(data.use_name.indexOf(search)>=0){
                
            // }
            li = document.getElementsByTagName("li");
            // data.indexOf(search,1);

            for (var a = 0; a < li.length; a++) {

                if (li[a].innerHTML.indexOf(search) >=0) {
                    li[a].style.background = "red";
                }

            }

            chushihua();
        }

    </script>
</body>

</html>